<template>
  <div>
    <div @click="onSelectNextUsers()" style="cursor: pointer">
      <!-- <el-input :disabled="disabled" v-model="currentRow.nickName" readonly :placeholder="placeholder"><i
          v-if="currentRow.nickName && !disabled" slot="suffix" @click.stop="clickIcon"
          class="el-input__icon el-icon-circle-close"></i></el-input> -->
          <el-button type="primary" size="mini">选择设备</el-button>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <el-row type="flex" :gutter="20">
        <el-col :span="24">
          <el-form :model="queryParams1" ref="queryForm" size="small" :inline="true">
            <el-form-item label="设备编号" prop="deviceCode">
              <el-input v-model="queryParams1.deviceCode" placeholder="请输入设备编号" clearable style="width: 240px"
                @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="设备名称" prop="deviceName">
              <el-input v-model="queryParams1.deviceName" placeholder="请输入设备名称" clearable style="width: 240px"
                @keyup.enter.native="handleQuery" />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table ref="userTable" height="500" v-loading="userLoading" :data="userList" highlight-current-row
            @current-change="changeCurrentUser">
            <el-table-column label="设备编号" align="center" prop="deviceCode" />
            <el-table-column label="设备名称" align="center" prop="deviceName" />
            <el-table-column label="所在位置" align="center" prop="site" />
          </el-table>
          <pagination :total="total" :page.sync="queryParams1.pageNum" :limit.sync="queryParams1.pageSize"
            @pagination="getListUser" />
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="submitUserData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { selectUser, deptTreeSelect } from "@/api/system/user";
// import { listDevice } from "@/api/finance/personnel/file.js"
import { listDevice, delDevice, deviceAudit } from "@/api/device/device.js";
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    value: [String, Object, Array, Number],
    placeholder: {
      type: String,
      default: "请检索员工",
    },
    typeValue: {
      type: String,
      default: "",
    },
    becomeShow: {
      type: Boolean,
      default: false,
    },
    flag: {
      type: Number,
      default: null
    },
    status: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      deptProps: {
        children: "children",
        label: "label",
      },
      open: false,
      title: "人员检索",
      // deptOptions: [],
      userLoading: false,
      queryParams1: {
        nickName: "",
        phonenumber: "",
        deptId: undefined,
        pageSize: 10,
      },
      userMultipleSelection: [],
      // 部门名称
      deptName: undefined,
      userList: [],
      currentRow: {
        nickName: "",
      },
      total: "",
      currentRowCopy:{}
    };
  },
  watch: {
    value: {
      handler(val) {
        this.currentUserId = val;
        this.checkRow();
        if (!val) this.clickIcon();
      },
      deep: true,
      immediate: true,
    },
    typeValue: {
      handler(val) {
        this.queryParams1.deptId = val;
      },
      deep: true,
      immediate: true,
    },
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {
    this.getListUserFrist();
    this.getListUser(true);
  },
  methods: {
    handleQuery() {
      this.queryParams1.pageNum = 1;
      this.getListUser();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    onSelectNextUsers() {
      if (this.disabled) return;
      this.onSelectUsers("人员");
    },
    onSelectUsers(title) {
      this.open = true;
      this.getListUser();
    },

    /** 查询用户列表 */
    getListUser(e) {
      // if (this.becomeShow == true) {
        // this.queryParams1.status = this.status
        // this.queryParams1.pageNum = 1
        // this.queryParams1.person = 0
        // this.queryParams1.flag = this.flag
        listDevice(
          this.addDateRangeTime(
            this.queryParams1,
          )
        ).then((response) => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
          if (!e) {
            this.checkRow();
          }
        });
      // } else {
      //   // this.userLoading = true;
      //   selectUser(this.queryParams1).then((response) => {
      //     this.userLoading = false;
      //     this.userList = response.rows;
      //     this.total = response.total;
      //     if (!e) {
      //       this.checkRow();
      //     }
      //   });
      // }

    },
    // getListUserFrist() {
    //   if (this.becomeShow) {
    //     this.queryParams1.status = this.status
    //     this.queryParams1.pageNum = 1
    //     this.queryParams1.person = 0
    //     this.queryParams1.flag = this.flag
    //     listDevice(
    //       this.queryParams1,
    //     ).then((response) => {
    //       this.$nextTick(() => {
    //         response.rows.forEach(item => {
    //           item.phonenumber = item.phone
    //           item.dept = {
    //             deptName: item.join.deptName,
    //             deptId: item.join.deptId
    //           }
    //         });
    //       })

    //       this.checkRow(response.rows);
    //     })
    //   } else {
    //     selectUser().then((response) => {
    //       this.checkRow(response.rows);
    //     });
    //   }

    // },
    // checkRow(list) {
    //   if (this.becomeShow) {
    //     // this.currentRow = list
    //     // if (!this.currentRow) {
    //     //     this.currentRow = {
    //     //       nickName: "",
    //     //     };
    //     //   }
    //     this.$emit("change", this.currentRow);
    //     this.toggleSelection(this.currentRow);
    //   } else {
    //     if (list && list.length) {
    //       this.currentRow = list.find((k) => k.userId == this.value);
    //       if (!this.currentRow) {
    //         this.currentRow = {
    //           nickName: "",
    //         };
    //       }
    //       this.$emit("change", this.currentRow);
    //       this.toggleSelection(this.currentRow);
    //     } else if (this.value && this.userList.length) {
    //       this.currentRow = this.userList.find((k) => k.userId == this.value);
    //       if (!this.currentRow) {
    //         this.currentRow = {
    //           nickName: "",
    //         };
    //       }
    //       this.$emit("change", this.currentRow);
    //       this.toggleSelection(this.currentRow);
    //     }
    //   }
    // },
    // clickIcon(e) {
    //   (this.currentRow = {
    //     nickName: "",
    //   }),
    //     (this.currentUserId = "");
    //   this.$emit("change", this.currentRow);
    //   this.$emit("input", this.currentUserId);
    // },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      if (this.typeValue) {
        this.$modal.msgWarning("只能选择当前部门");
        return;
      }
      this.queryParams1.deptId = data.id;
      this.onSelectUsers();
    },
    changeCurrentUser(val) {
      this.currentUserId =  val.deviceId ;
      this.currentRowCopy = val
    },
    toggleSelection(selection) {
      if (selection) {
        this.$nextTick(() => {
          this.$refs.userTable && this.$refs.userTable.setCurrentRow(selection);
        });
      } else {
        this.$nextTick(() => {
          // this.$refs.userTable.clearSelection();
        });
      }
    },
    submitUserData() {
      if (!this.currentUserId) {
        this.$modal.msgError("请选择人员");
        return false;
      }
      // if (this.becomeShow) {
      //   this.currentRow = this.userList.find(
      //     (k) => k.userDocBaseId === this.currentUserId
      //   );
      // } else {
      //   this.currentRow = this.userList.find(
      //     (k) => k.userId === this.currentUserId
      //   );
      // }
      // this.currentRow = this.userList.find(
      //     (k) => k.userDocBaseId === this.currentUserId
      //   );
      this.$emit("change", this.currentRowCopy);
      this.$emit("input", this.currentUserId);
      this.open = false;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
  cursor: pointer;
}
</style>
